<template>
    <div class="sx-activityDetails-content">
        <el-table
            size="mini" :data="tableData" stripe fit style="width: 100%">
            <el-table-column label="社团名称" align="center">
                <template slot-scope="scope">
                    <span class="sx-color" style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="活动名称"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <p>{{ scope.row.name }}</p>
                </template>
            </el-table-column>
            <el-table-column
                label="活动形式" align="center">
                <template slot-scope="scope">
                    <p>{{scope.row.num}}</p>
                </template>
            </el-table-column>
            <el-table-column
                label="活动类型"
                align="center">
                <template slot-scope="scope">
                    <p>{{scope.row.reportNum}}</p>
                </template>
            </el-table-column>
            <el-table-column
                label="报名开始时间">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="报名截至时间">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="活动开始时间">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="活动结束时间">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="发布机构">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="学分">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="活动状态">
                <template slot-scope="scope">
                    <el-tag
                        type="success">
                        {{scope.row.status == 1 ? '招聘中' : '未招聘'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <el-button size="mini" type="primary">欢迎投递</el-button>
            </el-table-column>
        </el-table>
        <div class="sx-table-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default{
    name: 'activityTableList',
    data() {
        return {
            currentPage4: 1,
            tableData: [{
                date: '曳步舞社',
                name: '书法社是以学生为主体的社团，一切为了同学们的利阿三大苏打撒大苏打撒大苏打23撒大大撒旦2',
                num: 1,
                reportNum: 100,
                status: 1, // 1 招聘中 0 未招聘
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '古装社',
                name: '书法社是以学生为主体的社团，一切为了同学们的利啊沙发沙发达拉斯你打算发就发',
                num: 3,
                reportNum: 100,
                status: 1, // 1 招聘中 0 未招聘
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '书法社',
                name: '书法社是以学生为主体的社团，一切为了同学们的利阿三大苏打哪里接你',
                num: 2,
                reportNum: 100,
                status: 1, // 1 招聘中 0 未招聘
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '篮球社',
                name: '书法社是以学生为主体的社团，一切为了同学们的利萨达萨达是擦打算大苏打大苏打',
                num: 2,
                reportNum: 100,
                status: 1, // 1 招聘中 0 未招聘
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        handleSizeChange(){},
        handleCurrentChange(){},
    }
}
</script>

<style lang="scss">
.el-button{
    width: 80px;
}
.sx-activityDetails-content{
    width: 1200px;
    box-sizing: border-box;
    padding: 10px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
    .sx-table-page{
        width: 800px;
        padding: 20px 0 10px 0;
    }
}


</style>